import React, { Component } from 'react'
import {
  Platform,
  StyleSheet,
  Text,
  Image,
  View,
  ScrollView,
  TouchableWithoutFeedback,
  Dimensions
} from 'react-native'
import * as storage from '../utils/storage'
const screenWidth = Dimensions.get('window').width

let initX = 0
let scrollViewRef

export default class Desk extends Component {
  constructor () {
    super()
    this.state = {
      readHistory: []
    }
  }

  getReadHistory () {
    storage.getItem('readHistory')
      .then(data => {
        if (data !== null) {
          const tmp = JSON.parse(data)
          let readHistory = []
          Object.keys(tmp).map(key => {
            const item = {
              bookId: key,
              title: tmp[key].title,
              imageUrl: tmp[key].imageUrl
            }
            readHistory.push(item)
          })
          this.setState({
            readHistory: readHistory
          })
        }
      })
  }

  handleScrollEnd (e) {
    let nextOffset
    const offsetX = e.nativeEvent.contentOffset.x
    const index = Math.floor(offsetX / screenWidth)
    const direction = (offsetX - initX) > 0 ? 1 : -1   //  大于0向左，小于0向右
    if (Math.abs(offsetX - (index * screenWidth)) > screenWidth / 4) {
      nextOffset = screenWidth * (index + 1) * direction
    } else {
      nextOffset = screenWidth * index * direction
    }
    scrollViewRef.scrollTo({ x: nextOffset })
    initX = nextOffset
  }

  componentDidMount () {
    this.getReadHistory()
  }

  shouldComponentUpdate() {
    console.log(123)
  }

  render () {
    const { readHistory } = this.state
    return (
      <View style={styles.deskContainer}>
        <ScrollView 
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          style={{ flex: 1}}
          pagingEnabled={true}
          // onMomentumScrollEnd={this.handleScrollEnd}
          ref={(scrollView) => { scrollViewRef = scrollView }}
        >
          {
            readHistory.map(item => 
              <TouchableWithoutFeedback style={styles.readHisItem} key={item.bookId}>
                <View style={styles.readHisItem}>
                  <Image source={{ uri: item.imageUrl }} style={styles.readHisItemImage}></Image>
                  <View style={styles.readHisItemTitle}>
                    <Text style={styles.readHisItemTitleText}>{item.title}</Text>
                  </View>
                </View>
              </TouchableWithoutFeedback>
            )
          }
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  deskContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  readHisItem: {
    width: screenWidth,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  readHisItemImage: {
    width: screenWidth * 0.4,
    height: screenWidth * 0.4 * 1.4
  },
  readHisItemTitle: {
    justifyContent: 'flex-start',
    marginTop: 26
  },
  readHisItemTitleText: {
    fontSize: 14,
    color: '#333'
  }
})
